<!--  -->
<template>
  <div class='label-page'>
    <van-popup v-model="addTagPop" position="bottom" @close="downTagPop" :style="{ borderRadius: '15px 15px 0 0' }"
      ref="addTagRef" :lock-scroll="false" :lazy-render="false" @opened="addOpened">
      <div class="add-tag-main">
        <div class="addTag-head flex-a-c flex-j-sb">
          <h3 style="font-weight: bold;font-size: 1rem;">添加标签</h3>
          <span class="iconfont icon-guanbi" @click.stop="downTagPop"></span>
        </div>

        <p class="desc">注：添加标签后默认选中该标签</p>
        <div class="add-tag-form">
          <div class="tag-input flex-a-c">
            <div class="name">标签名</div>
            <el-input v-model="tagKeyWord" placeholder="请输入内容" @change="tagChange"></el-input>
          </div>
          <div class="tag-group flex">
            <div class="name">标签组</div>
            <div class="group-list " ref="groupTagList">
              <div>
                <div class="group-list-main flex-a-c flex-j-sb">
                  <div class="group-btn flex-j-c flex-a-c" :class="groupIndex === index ? 'on' : ''"
                    v-for="(item, index) in groupList" :key="index" @click="groupClick(item, index)">{{ item.group_name
                    }}
                  </div>
                </div>
                <span id="addLoadMore" style="display: inline-block; width: 100%; height: 5rem;"></span>
              </div>
            </div>
          </div>
        </div>
        <div class="m-100"></div>
        <div class="footer-btn flex-a-c flex-j-sb">
          <div class="footer-cancel" @click.stop="downTagPop">取消</div>
          <div class="footer-confirm" @click="addConfirmOn">添加</div>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  name: '',
  //import引入的组件需要注入到对象中才能使用
  components: {},
  props: ['addTagPop', 'groupList'],
  data() {
    return {
      tagKeyWord: '',
      groupId: '',
      groupIndex: 0
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    downTagPop() {
      this.$emit('update:addTagPop', this.addTagPop = false);
    },
    addConfirmOn() {
      if (!this.tagKeyWord) {
        return this.$toast('请输入标签');
      }
      this.$emit('addConfirmOn', { tagKeyWord: this.tagKeyWord, index: this.groupIndex, groupId: this.groupId })
    },
    addOpened() {
      if (this.$refs.addTagRef) {
        this.$parent.addOpened();
      }
    },
    groupClick(item, index) {
      this.groupIndex = index;
      this.groupId = item.group_id;

    }
  }
}
</script>
<style scoped>
.label-page {
  position: relative;
}

.icon-guanbi {
  width: 24px;
  height: 24px;
  background: #F0F0F1;
  border-radius: 100%;
  font-size: 0.65rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6E6E79;
}

.add-tag-main ::v-deep .group-list {
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* IE 10+ */
}

.add-tag-main ::v-deep .group-list::-webkit-scrollbar {
  display: none;
  /* Chrome Safari */
}
</style>
<style lang="scss" scoped>
/* @import url(); 引入公共css类 */
.m-100 {
  height: 60px;
  clear: both;
}

.add-tag-main {
  padding: 20px 15px 13px 15px;

  h3 {
    color: #1B1B1B;
    text-align: left;
  }

  .desc {
    font-weight: 400;
    font-size: .8125rem;
    color: #6E6E79;
    line-height: 1;
    padding: 0 0 20px 0;
    margin-top: .75rem;
    text-align: left;
  }

  .add-tag-form {

    .tag-input,
    .tag-group {
      .name {
        font-size: .875rem;
        color: #00001C;
        white-space: nowrap;
        padding-right: 13px;
      }
    }

    .tag-group {
      padding: 13px 0 0 0;

      .name {}

      .group-list {
        width: calc(100% - 30px);
        height: 50vh;
        overflow: hidden;

        .group-list-main {
          flex-wrap: wrap;
        }

        .group-btn {
          flex: 0 0 48%;
          max-width: 48%;
          box-sizing: border-box;
          font-size: 12px;
          line-height: 12px;
          // padding:9px 30px;
          min-height: 34px;
          border: 1px solid #D6D6DC;
          border-radius: 8px 8px 8px 8px;
          margin: 0 0px 10px 0;
          // &:nth-child(3n) {
          //   margin:0  0px 10px 0;
          // }
        }

        .on {
          border: 1px solid var(--themeBaseColor);
          color: var(--themeBaseColor);
        }
      }

    }
  }

  .footer-btn {
    width: 100%;
    box-shadow: 0px 1px .3125rem 1px #D6D6DC;
    border-radius: .625rem .625rem 0px 0px;
    background-color: #fff;
    box-sizing: border-box;
    position: fixed;
    height: 4.75rem;
    bottom: 0;
    left: 0;
    padding: 0px 15px;

    .footer-cancel {
      font-size: 14px;
      color: #1B1B1B;
      width: calc((100% - 10px*2)/2);

      padding: 12px 0px;
      border: 1px solid #D0D0D0;
      border-radius: 20px;
    }

    .footer-confirm {
      font-size: 14px;
      color: #FFFFFF;
      font-weight: 500;
      width: calc((100% - 10px*2)/2);
      background: var(--themeBaseColor);
      padding: 12px 0px;
      border-radius: 20px;
      // padding:12px 58px;
    }
  }
}
</style>